import React, { useState } from 'react';
import styled from 'styled-components';
import { motion } from 'framer-motion';
import { colors, spacing, typography } from '../styles/variables';
import { Card, Title, Paragraph, Button, Flex, Grid } from '../styles/components';

const FortuneHeader = styled.div`
  text-align: center;
  padding: ${spacing.xl} 0;
  margin-bottom: ${spacing.xl};
  background: linear-gradient(135deg, ${colors.backgroundSecondary} 0%, ${colors.background} 100%);
  border-radius: ${spacing.lg};
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 200px;
`;

const ZodiacSelector = styled.div`
  display: flex;
  justify-content: center;
  gap: ${spacing.sm};
  margin: ${spacing.lg} 0;
  flex-wrap: wrap;
`;

const ZodiacButton = styled(Button)`
  background: ${props => props.active ? colors.gradientGold : colors.backgroundSecondary};
  color: ${props => props.active ? colors.background : colors.textPrimary};
  border: 1px solid ${props => props.active ? 'transparent' : colors.border};
  padding: ${spacing.sm} ${spacing.md};
  font-size: ${typography.fontSize.sm};

  &:hover {
    transform: translateY(-2px);
  }
`;

const FortuneCategory = styled.div`
  margin-bottom: ${spacing.xxl};
`;

const CategoryTitle = styled.h3`
  color: ${colors.textPrimary};
  font-size: ${typography.fontSize['2xl']};
  margin-bottom: ${spacing.lg};
  padding-bottom: ${spacing.sm};
  border-bottom: 1px solid ${colors.border};
  display: flex;
  align-items: center;
  gap: ${spacing.sm};
`;

const FortuneItem = styled.div`
  margin-bottom: ${spacing.lg};
`;

const ItemTitle = styled.h4`
  color: ${colors.textPrimary};
  font-size: ${typography.fontSize.lg};
  margin-bottom: ${spacing.sm};
  display: flex;
  align-items: center;
  gap: ${spacing.sm};
`;

const ProgressBar = styled.div`
  height: 10px;
  background: ${colors.backgroundSecondary};
  border-radius: 5px;
  overflow: hidden;
  margin: ${spacing.sm} 0;
`;

const ProgressFill = styled.div`
  height: 100%;
  background: ${props => {
    switch(props.level) {
      case 'high': return colors.success;
      case 'medium': return colors.warning;
      case 'low': return colors.error;
      default: return colors.primary;
    }
  }};
  width: ${props => props.width}%;
  border-radius: 5px;
  transition: width 1s ease-in-out;
`;

const ShareButton = styled(Button)`
  margin-top: ${spacing.lg};
`;

const zodiacSigns = [
  '鼠', '牛', '虎', '兔', '龙', '蛇', 
  '马', '羊', '猴', '鸡', '狗', '猪'
];

const fortuneCategories = [
  {
    title: '事业运',
    icon: '💼',
    items: [
      { name: '工作状态', level: 'high', value: 85 },
      { name: '贵人运', level: 'medium', value: 70 },
      { name: '财运', level: 'high', value: 90 }
    ]
  },
  {
    title: '感情运',
    icon: '❤️',
    items: [
      { name: '桃花运', level: 'medium', value: 65 },
      { name: '人际关系', level: 'high', value: 80 },
      { name: '家庭和睦', level: 'high', value: 88 }
    ]
  },
  {
    title: '健康运',
    icon: '💊',
    items: [
      { name: '身体状况', level: 'high', value: 92 },
      { name: '精神状态', level: 'medium', value: 75 },
      { name: '运动指数', level: 'low', value: 40 }
    ]
  }
];

function DailyFortune() {
  const [selectedZodiac, setSelectedZodiac] = useState('龙');

  return (
    <>
      <FortuneHeader>
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', flex: 1 }}
        >
          <Title style={{ textAlign: 'center', marginBottom: spacing.md }}>每日运势</Title>
          <Paragraph center>查看您的专属每日运势指南</Paragraph>
        </motion.div>
      </FortuneHeader>

      <Card>
        <Paragraph center>选择您的生肖查看运势</Paragraph>
        <ZodiacSelector>
          {zodiacSigns.map((sign, index) => (
            <ZodiacButton
              key={index}
              active={selectedZodiac === sign}
              onClick={() => setSelectedZodiac(sign)}
            >
              {sign}
            </ZodiacButton>
          ))}
        </ZodiacSelector>
      </Card>

      {/* 在选择生肖卡片和运势分类之间添加间距 */}
      <div style={{ marginTop: '24px' }} />

      <motion.div
        key={selectedZodiac}
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 0.5 }}
      >
        {fortuneCategories.map((category, categoryIndex) => (
          <FortuneCategory key={categoryIndex}>
            <CategoryTitle>
              <span>{category.icon}</span>
              {category.title}
            </CategoryTitle>
            {category.items.map((item, itemIndex) => (
              <FortuneItem key={itemIndex}>
                <ItemTitle>
                  {item.name}
                </ItemTitle>
                <ProgressBar>
                  <ProgressFill 
                    level={item.level} 
                    width={item.value}
                    as={motion.div}
                    initial={{ width: '0%' }}
                    animate={{ width: `${item.value}%` }}
                    transition={{ duration: 1, delay: (categoryIndex * 0.2) + (itemIndex * 0.1) }}
                  />
                </ProgressBar>
                <Paragraph secondary>{item.value}%</Paragraph>
              </FortuneItem>
            ))}
          </FortuneCategory>
        ))}

        <Card>
          <Title size="md">今日建议</Title>
          <Paragraph>
            今天适合主动出击，无论是工作还是感情方面都会有不错的表现。
            保持积极的心态，多与他人交流，会有意想不到的收获。
            注意身体健康，适当运动，避免过度劳累。
          </Paragraph>
        </Card>

        <Flex justify="center">
          <ShareButton variant="primary">
            📤 分享运势
          </ShareButton>
        </Flex>
      </motion.div>
    </>
  );
}

export default DailyFortune;